<template>
    <view>
        <view class="form" v-if="!batchs">
            <input maxlength="8" v-if="wx" type="nickname" placeholder="请输入姓名" v-model="name"/>
            <input maxlength="8" v-else placeholder="请输入姓名" v-model="name"/>
            <input maxlength="6" placeholder="请输入解压密码" v-model="password" type="number"/>
            <radio-group @change="radioChange">
                <label>
                    <radio :checked="!wx" value="0" style="transform:scale(0.65,0.65)" color="#08BA88"/>
                    <text>支付宝</text>
                </label>
                <label>
                    <radio :checked="wx" value="1" style="transform:scale(0.65,0.65)" color="#08BA88"/>
                    <text>微信</text>
                </label>
            </radio-group>
            <view class="btn m-30" @click="getData">查询</view>
            <view class="note">
                <view>使用说明：</view>
                <view>支付宝：进入【账单】列表页面，点击【...】，点击【开具交易证明流水】，选择【用于个人对账、申请】，选择【时间范围、下一步】，邮箱地址：<text @click="copy">jsonlu@qq.com</text>，发送</view>
                <view>微信：进入【账单】列表页面，点击【常见问题】，点击【下载账单】，选择【用于个人对账】，选择【账单时间、下一步】，邮箱地址：<text @click="copy">jsonlu@qq.com</text>，下一步...</view>
            </view>
        </view>
        <view v-for="(item,index) in groupList" :key="index" class="lll">
            <view class="date_div" v-if="item.date">{{item.date}}</view>
            <view class="card">
                <uni-swipe-action>
                    <uni-swipe-action-item>
                        <view class="record_list">
                            <view class="record_items">
                                <view class="left">
                                    <Icon :iconName="$store.getters.getItemIcon(item.t_id)"/>
                                </view>
                                <view class="center">
                                    <text class="nameSpan">{{$store.getters.getItemName(item.t_id)}}</text>
                                    <text class="noteSpan">{{item.note || '无备注'}}</text>
                                </view>
                                <view class="right">
                                    <text class="amountSpan">￥{{item.amount}}</text>
                                    <text class="dateSpan">{{itemDate(item)}}</text>
                                </view>
                            </view>
                        </view>
                        <template v-slot:right>
                            <view class="action-right" @click="delRecode(index)">
                                <text>删除</text>
                            </view>
                        </template>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </view>
        </view>
        <view style="height: 144rpx"/>
        <view class="bottom" @click="batchAdd" v-if="batchs">
            <view class="btn">导入</view>
        </view>
    </view>
</template>

<script>
import day from 'dayjs'
import { mapState } from 'vuex'
import { httpPOST } from '@/common/req'
export default {
  name: 'batch',
  data() {
    return {
      name: '',
      password: '',
      wx: false,
      batchs: null,
      rdData: {}
    }
  },
  onLoad(e) {
    this.bookUser().then()
  },
  watch: {
    wx(n, o) {
      const { ali_name, wx_name } = this.rdData || {}
      this.name = n ? (wx_name || '') : (ali_name || '')
    }
  },
  computed: {
    ...mapState(['userInfo']),
    itemDate() {
      return (item) => {
        return day(item.createdAt).format('HH:mm')
      }
    },
    groupList() {
      const { batchs } = this
      if (!batchs) { return [] }
      const ss = batchs
      return ss.map((i, k) => {
        const date = i.createdAt.split(' ')[0]
        if (k === 0) {
          i.date = date
        } else {
          const before = ss[k - 1].createdAt.split(' ')[0]
          if (before !== date) {
            i.date = date
          }
        }
        return i
      })
    }
  },
  methods: {
    copy() {
      uni.setClipboardData({
        data: 'jsonlu@qq.com',
        success: ()=> {
          this.$api.alert('邮箱地址已复制到剪切板')
        }
      })
    },
    delRecode(i) {
      this.batchs = this.batchs.filter((ii, k) => k !== i)
    },
    radioChange({ detail: { value } }) {
      this.wx = value === '1'
    },
    async bookUser() {
      const url = 'book/account/user'
      const param = { user: this.userInfo.user }
      const [err, data] = await httpPOST({ url, param })
      if (data) {
        this.rdData = data.data
        const { ali_name, wx_name } = this.rdData
        this.name = this.wx ? (wx_name || '') : (ali_name || '')
        console.error(data)
      }
    },
    async batchAdd() {
      const url = 'book/record/batch'
      const records = this.batchs.map(i => {
        i.u_id = this.userInfo.id
        delete i.date
        return i
      })
      const param = { records, id: this.userInfo.id }
      const key = this.wx ? 'wx_name' : 'ali_name'
      param[key] = this.name
      const [err, data] = await httpPOST({ url, param })
      if (data) {
        this.$api.alert('导入成功')
        setTimeout(() => {
          uni.switchTab({ url: '/main/Detail/Detail' })
        }, 500)
      }
    },
    async getData() {
      if (!this.name || this.password.length !== 6) { return }
      const url = 'https://api.benlv.top/auth/mail/batch'
      const { wx, password } = this
      uni.showLoading({ title: '加载中', mask: true })
      const [err, data] = await httpPOST({ url, param: { wx, password } })
      uni.hideLoading()
      console.error(data)
      if (data) {
        if (data.err) {
          this.$api.alert(data.err)
          return
        }
        const { list, name, start, end } = data
        if (this.name === name) {
          this.batchs = list
        } else {
          this.$api.alert('账单信息不符')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form{
    margin: 56rpx 24rpx;
    input{
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 6rpx;
        border: 1px solid seagreen;
        margin-bottom: 16rpx;
        padding: 0 10rpx;
    }
    font-size: 32rpx;
    color: #333333;
    radio-group{
        display: flex;
        label{
            width: 26%;
            display: flex;
            align-items: center;
        }
    }
}
.m-30{
    margin-top: 88rpx;
}
.lll{
    padding: 0 24rpx;
    margin-bottom: 12rpx;
    .card{
        background-color: #f9faf5;
        border-radius: 20rpx
    }
}
.action-right{
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $uni-color-btn;
    width: 100rpx;
    height: 100%;
    padding: 0 12rpx;
    color: white
}
.date_div {
    font-size: 16px;
    color: $uni-color-primary;
    font-weight: 700;
    padding: 10px;
}

.record_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.record_items {
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
        padding-right: 10px;

        .icon {
            width: 42px;
            height: 42px;
        }
    }

    .center {
        flex: 1;
        display: flex;
        flex-direction: column;

        .nameSpan {
            font-size: 18px;
            font-weight: 700;
        }

        .noteSpan {
            margin-top: 8px;
            color: #666;
            font-size: 14px;
        }
    }

    .right {
        display: flex;
        flex-direction: column;

        .amountSpan {
            font-size: 18px;
            font-weight: 700;
        }

        .dateSpan {
            margin-top: 8px;
            color: #666;
            font-size: 14px;
            text-align: right;
        }
    }

}
.note{
    font-size: 12px;
    color: #333333;
    padding: 32rpx 24rpx;
    view{
        margin-top: 8rpx;
    }
    text{
        color: royalblue;
        font-size: 26rpx;
    }
}
</style>
